blog

Tron 2.0 - Creating a Visual Language of Scale

Today we introduce TRON version 2 as a fully realized Mapzen house style, rebuilt from the ground up to take advantage of the latest features of the Tangram graphics engine and Tangram blocks. With this new version, visual forms and elements transform per zoom, revealing new cartographic details and a deep exploration of scale transformations.

We’re pushing both the medium and mapping to new extremes with TRON, and it will push your GPU and fan to the limit. We want to let everyone know what is possible in OpenGL and WebGL, and designed it for game developers to remix.

Will autonomous cars dream as they charge overnight? Mapzen’s Tangram lets us imagine! Explore TRON v2 in this interactive map, and keep reading to dive into its visual language of scale.

( Open San Francisco full screen. Or Tokyo! Or Paris! )

 

What are the visual qualities and elements of the Tron Universe? Number one: Glow Two, Primary Shapes Three, Repetition How can we translate this visual vocabulary to express the experience of scale?

 

The World View in Stripes. This was our starting point. From here we built on top, adding cartographic detaisl per zoom.

 

Water. Transformation from low to high zooms. Water

 

Coastlines. Coastlines begin with a single glow line, gradually thickening, then expanding to pulsating waves at high zooms. Coastlines

 

Airports. Airports begin as single glow lines transitioning to thick dark lines, revealing runway lights at higher zooms. Airports Runway

 

Buildings. Line footprints extruding with translucent textures. Buildings

 

Highways. Beginning as single glow lines, with each zoom revealing greater levels of detail. Highways

 

Icons. Scale. Park Icon

Spritesheet

13 October 2016